import React, { PureComponent } from 'react';
import { Card } from 'antd';
import StandardTable from '@/components/StandardTable';
import Authorized from '@/utils/Authorized';
import TextOverFlow from '../../components/TextOverFlow';

class EmpInfor extends PureComponent {
  state = {
    scroll: {
      x: 4000,
    },
  };

  jumpRouting = targetRouter => {
    const { jumpRouting } = this.props;
    jumpRouting(targetRouter);
  };

  render() {
    const { scroll } = this.state;
    const { empInsPayInfo, empAccuPayInfo } = this.props;
    const socialColumns = [
      {
        title: '缴费月份',
        dataIndex: 'billYm',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
            width: '150px',
          },
        }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        fixed: 'left',
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '签约方',
        dataIndex: 'ordSndrName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '社保个人账号',
        dataIndex: 'empIndvAccoNo',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },

      {
        title: '缴费方式',
        dataIndex: 'payTypeName',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
      },
      {
        title: '业务年月',
        dataIndex: 'busiYm',

        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
        render: text => `${`${text}`.substring(0, 4)}-${`${text}`.substring(4)}`,
      },
      {
        title: '执行地区',
        dataIndex: 'declAreaName',

        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
      },
      {
        title: '养老',
        children: [
          {
            title: '个人账号',
            dataIndex: 'indvAccoNo_3',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
            render: text => text || '--',
          },
          {
            title: '企业基数',
            dataIndex: 'unitBase_3',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
          },
          {
            title: '个人基数',
            dataIndex: 'empBase_3',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
          },
          {
            title: '企业比例',
            dataIndex: 'unitProp_3',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
          },
          {
            title: '个人比例',
            dataIndex: 'empProp_3',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
          },
          {
            title: '企业缴费',
            dataIndex: 'unitAmo_3',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
          },
          {
            title: '个人缴费',
            dataIndex: 'empAmo_3',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
          },
        ],
      },
      {
        title: '医疗',
        children: [
          {
            title: '个人账号',
            dataIndex: 'indvAccoNo_6',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
            render: text => text || '--',
          },
          {
            title: '企业基数',
            dataIndex: 'unitBase_6',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
          },
          {
            title: '个人基数',
            dataIndex: 'empBase_6',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
          },
          {
            title: '企业比例',
            dataIndex: 'unitProp_6',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
          },
          {
            title: '个人比例',
            dataIndex: 'empProp_6',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
          },
          {
            title: '企业缴费',
            dataIndex: 'unitAmo_6',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
          },
          {
            title: '个人缴费',
            dataIndex: 'empAmo_6',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
          },
        ],
      },
      {
        title: '生育',
        children: [
          {
            title: '个人账号',
            dataIndex: 'indvAccoNo_7',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
            render: text => text || '--',
          },
          {
            title: '企业基数',
            dataIndex: 'unitBase_7',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
          },
          {
            title: '个人基数',
            dataIndex: 'empBase_7',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
          },
          {
            title: '企业比例',
            dataIndex: 'unitProp_7',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
          },
          {
            title: '个人比例',
            dataIndex: 'empProp_7',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
          },
          {
            title: '企业缴费',
            dataIndex: 'unitAmo_7',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
          },
          {
            title: '个人缴费',
            dataIndex: 'empAmo_7',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
          },
        ],
      },
      {
        title: '失业',
        children: [
          {
            title: '个人账号',
            dataIndex: 'indvAccoNo_4',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
            render: text => text || '--',
          },
          {
            title: '企业基数',
            dataIndex: 'unitBase_4',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
          },
          {
            title: '个人基数',
            dataIndex: 'empBase_4',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
          },
          {
            title: '企业比例',
            dataIndex: 'unitProp_4',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
          },
          {
            title: '个人比例',
            dataIndex: 'empProp_4',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
          },
          {
            title: '企业缴费',
            dataIndex: 'unitAmo_4',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
          },
          {
            title: '个人缴费',
            dataIndex: 'empAmo_4',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
          },
        ],
      },
      {
        title: '工伤',
        dataIndex: 'a26',
        children: [
          {
            title: '个人账号',
            dataIndex: 'indvAccoNo_5',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
            render: text => text || '--',
          },
          {
            title: '企业基数',
            dataIndex: 'unitBase_5',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
          },
          {
            title: '个人基数',
            dataIndex: 'empBase_5',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
          },
          {
            title: '企业比例',
            dataIndex: 'unitProp_5',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
          },
          {
            title: '个人比例',
            dataIndex: 'empProp_5',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
          },
          {
            title: '企业缴费',
            dataIndex: 'unitAmo_5',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
          },
          {
            title: '个人缴费',
            dataIndex: 'empAmo_5',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
          },
        ],
      },
    ];
    const accuColumns = [
      {
        title: '缴费月份',
        dataIndex: 'billYm',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
            width: '150px',
          },
        }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        fixed: 'left',
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '签约方',
        dataIndex: 'ordSndrName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '公积金个人账号',
        dataIndex: 'empIndvAccoNo',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '缴费方式',
        dataIndex: 'payTypeName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
        onCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '执行地区',
        dataIndex: 'declAreaName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        onCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '企业基数',
        dataIndex: 'unitBase',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
        onCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '个人基数',
        dataIndex: 'empBase',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
        onCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '企业比例',
        dataIndex: 'unitProp',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
        onCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '个人比例',
        dataIndex: 'empProp',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
        onCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '企业缴费',
        dataIndex: 'unitAmo',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
        onCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '个人缴费',
        dataIndex: 'empAmo',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
        onCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '账户余额',
        dataIndex: 'accoAmo',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
        onCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '业务年月',
        dataIndex: 'busiYm',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
        onCell: () => ({ style: { textAlign: 'center' } }),
      },
    ];
    return (
      <div>
        <Authorized authority="business:social:query" noMatch={null}>
          <Card
            title={<span>社保实缴信息</span>}
            id="paymentinsInfor"
            extra={<a onClick={() => this.jumpRouting('socialPay')}>缴纳记录&gt;&gt;</a>}
          >
            <StandardTable
              selectedRows={[]}
              selectedRowKeys={[]}
              data={empInsPayInfo}
              pagination={false}
              rowSelection={null}
              scroll={scroll}
              columns={socialColumns}
              rowKey="empId"
              onSelectRow={this.handleSelectRows}
              onChange={this.handleStandardTableChange}
              bordered
            />
          </Card>
        </Authorized>
        <Authorized authority="business:provident:query" noMatch={null}>
          <Card
            id="paymentaccuInfor"
            title={<span>公积金实缴信息</span>}
            extra={<a onClick={() => this.jumpRouting('accuPay')}>缴纳记录&gt;&gt;</a>}
          >
            <StandardTable
              selectedRows={[]}
              selectedRowKeys={[]}
              pagination={false}
              rowSelection={null}
              data={empAccuPayInfo}
              columns={accuColumns}
              rowKey="empId"
              onSelectRow={this.handleSelectRows}
              onChange={this.handleStandardTableChange}
            />
          </Card>
        </Authorized>
      </div>
    );
  }
}

export default EmpInfor;
